<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性学习</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>
</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <form  class="form-horizontal">
        <div class="form-group">
            <label for="R" class="col-sm-1 control-label">R</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="R" placeholder="" v-model.number="r">
            </div>
        </div>
        <div class="form-group">
            <label for="G" class="col-sm-1 control-label">G</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="G" placeholder="" v-model.number="g">
            </div>
        </div>
        <div class="form-group">
            <label for="B" class="col-sm-1 control-label">B</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" id="B" placeholder="" v-model.number="b">
            </div>
        </div>
    </form>
    <!--注意这里只能backgroundColor这样写，使用background-color不好使-->
    <div :style="{backgroundColor: rgb}">
        {{rgb}}
    </div>
    <a class="btn btn-default" href="javascript:;" role="button" @click="show">展示rgb值</a>
</div>

</body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            r:0,
            g:0,
            b:0
        },
        methods:{
            show(){
                alert(this.rgb);
            }
        },
        //计算属性中定义的都是方法(计算属性在渲染完成后会以值的方式存储，例如this.r;this.rgb都是同级的)
        computed:{
            rgb(){
                return `rgb(${this.r},${this.g},${this.b})`
            }
        }
    });

</script>
